<template>
  <div class="container">
    <el-dialog
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="detailVisible"
    >
      <el-form label-width="auto" ref="form">
        <!-- <el-form-item label="物资编码规则" v-show="active == 0">
          <el-input v-model="form.formList[id].name" disabled></el-input>
        </el-form-item> -->

        <el-form-item label="物资编码规则" v-show="active == 0">
          <el-select v-model="ruleName" placeholder="请选择规则">
            <el-option label="规则A" value="0"></el-option>
            <el-option label="规则B" value="1"></el-option>
            <el-option label="规则C" value="2"></el-option>
            <el-option label="规则D" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="编码级别">
          <el-select
            v-model="form.formList[id].region"
            placeholder="请选择活动区域"
          >
            <el-option label="项目级" value="项目级1111"></el-option>
            <el-option label="企业级" value="企业级"></el-option>
            <el-option label="项目级2" value="项目级2"></el-option>
            <el-option label="企业级2" value="企业级2"></el-option>
            <el-option label="项目级2" value="项目级2"></el-option>
            <el-option label="企业级2" value="企业级2"></el-option>
          </el-select>
        </el-form-item>
        <el-divider></el-divider>
      </el-form>

      <!-- 流水线 -->
      <el-steps :active="active" finish-status="success">
        <el-step
          v-for="(value, key) in rule.ruleList[id].message"
          :key="key"
          :title="value"
        ></el-step>
      </el-steps>

      <div class="search">
        <el-input placeholder="请输入内容" class="searchInput"></el-input>
        <el-button plain class="searchButton">搜索</el-button>
      </div>

      <!-- 表格 -->
      <el-table
        ref="singleTable"
        :data="
          this.rule.ruleList[id].tableData[active].tableDataList.slice(
            (currentPage - 1) * PageSize,
            currentPage * PageSize
          )
        "
        highlight-current-row
        @current-change="handleCurrentChangeTable"
        style="width: 100%; margin-top: 3%"
      >
        <el-table-column label="" width="150" align="center">
          <template #header>
            <el-button type="text" @click="clear"> 清除</el-button>
          </template>
          <template slot-scope="scope">
            <el-radio
              class="radio"
              v-model="templateSelection"
              :label="scope.$index"
              ><span></span
            ></el-radio>
          </template>
        </el-table-column>

        <el-table-column
          property="code"
          :label="this.rule.ruleList[this.id].tableData[this.active].codeName"
          width="200"
        >
        </el-table-column>
        <el-table-column
          property="name"
          :label="this.rule.ruleList[this.id].tableData[this.active].name"
          width="200"
        >
        </el-table-column>
        <el-table-column property="describe" label="描述"> </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="PageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="
            this.rule.ruleList[this.id].tableData[this.active].tableDataList
              .length
          "
          background
        >
        </el-pagination>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button
          style="margin-top: 12px"
          @click="last"
          :disabled="active == 0"
          >上一步</el-button
        >
        <el-button
          style="margin-top: 12px"
          @click="next"
          :disabled="active == this.rule.ruleList[this.id].tableData.length - 1"
          >下一步</el-button
        >
        <el-button
          style="margin-top: 12px"
          @click="submit"
          :disabled="active != this.rule.ruleList[this.id].tableData.length - 1"
          >提交</el-button
        >
        <el-button style="margin-top: 12px" @click="cancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Cookies from "js-cookie"
export default {
  name: "dialogComponent",
  data() {
    return {
      ruleName: "项目A",
      detailVisible: false,
      form: {
        formList: [
          {
            id: 0,
            ruleName: "项目A",
            name: "元件 等级 尺寸 流水号",
            region: "项目级",
          },
          {
            id: 1,
            ruleName: "项目B",
            name: "元件 等级 尺寸 流水号",
            region: "项目级",
          },
          {
            id: 2,
            ruleName: "项目C",
            name: "元件 等级 尺寸 流水号",
            region: "项目级",
          },
          {
            id: 3,
            ruleName: "项目D",
            name: "元件 等级 尺寸 流水号",
            region: "项目级",
          },
        ],
      },
      id: 0, //规则序号
      active: 0, // 流水线第几步
      rule: {
        // 规则
        ruleList: [
          {
            id: 1,
            name: "规则A",
            message: ["元件", "等级", "尺寸", "流水号"],
            tableData: [
              {
                id: 1,
                codeName: "编码",
                name: "名称",
                tableDataList: [
                  {
                    id: 1,
                    code: "PIP",
                    name: "管道",
                    describe: "****",
                  },
                  {
                    id: 2,
                    code: "FIT",
                    name: "管件",
                    describe: "****",
                  },
                  {
                    id: 3,
                    code: "P_BLT",
                    name: "螺栓",
                    describe: "****",
                  },
                  {
                    id: 4,
                    code: "P_BLT",
                    name: "栅栏",
                    describe: "**********",
                  },
                  {
                    id: 5,
                    code: "PIP",
                    name: "管道2",
                    describe: "****",
                  },
                  {
                    id: 6,
                    code: "FIT",
                    name: "管件2",
                    describe: "****",
                  },
                  {
                    id: 7,
                    code: "P_BLT",
                    name: "螺栓2",
                    describe: "****",
                  },
                  {
                    id: 8,
                    code: "P_BLT",
                    name: "栅栏2",
                    describe: "**********",
                  },
                ],
              },
              {
                id: 2,
                codeName: "编码",
                name: "等级",
                tableDataList: [
                  {
                    id: 1,
                    code: "PP",
                    name: "等级1",
                    describe: "****",
                  },
                  {
                    id: 2,
                    code: "PB",
                    name: "等级2",
                    describe: "****",
                  },
                  {
                    id: 3,
                    code: "PC",
                    name: "等级3",
                    describe: "****",
                  },
                  {
                    id: 4,
                    code: "PD",
                    name: "等级4",
                    describe: "****",
                  },
                  {
                    id: 5,
                    code: "PA",
                    name: "等级1",
                    describe: "****",
                  },
                  {
                    id: 6,
                    code: "PBQ",
                    name: "等级2",
                    describe: "****",
                  },
                  {
                    id: 7,
                    code: "PCM",
                    name: "等级3",
                    describe: "****",
                  },
                  {
                    id: 8,
                    code: "PDR",
                    name: "等级4",
                    describe: "****",
                  },
                ],
              },
              {
                id: 3,
                codeName: "编码",
                name: "尺寸",
                tableDataList: [
                  {
                    id: 1,
                    code: "PP",
                    name: "小号",
                    describe: "****",
                  },
                  {
                    id: 2,
                    code: "PA",
                    name: "中号",
                    describe: "****",
                  },
                  {
                    id: 3,
                    code: "PB",
                    name: "大号",
                    describe: "****",
                  },
                  {
                    id: 4,
                    code: "PC",
                    name: "超大号",
                    describe: "****",
                  },
                ],
              },
              {
                id: 4,
                codeName: "物资编码",
                name: "流水号",
                tableDataList: [
                  {
                    id: 1,
                    code: "PPASAS",
                    name: "100001",
                    describe: "****",
                  },
                  {
                    id: 2,
                    code: "PPFDSA",
                    name: "100002",
                    describe: "****",
                  },
                  {
                    id: 3,
                    code: "PPFDSAF",
                    name: "100003",
                    describe: "****",
                  },
                  {
                    id: 4,
                    code: "PEFAEFP",
                    name: "100004",
                    describe: "****",
                  },
                ],
              },
            ],
          },
          {
            id: 2,
            name: "规则B",
            message: ["元件", "等级", "尺寸", "流水号"],
            tableData: [
              {
                id: 1,
                codeName: "编码",
                name: "名称",
                tableDataList: [
                  {
                    id: 1,
                    code: "PIP",
                    name: "管道",
                    describe: "****",
                  },
                  {
                    id: 2,
                    code: "FIT",
                    name: "管件",
                    describe: "****",
                  },
                  {
                    id: 3,
                    code: "P_BLT",
                    name: "螺栓",
                    describe: "****",
                  },
                  {
                    id: 4,
                    code: "P_BLT",
                    name: "栅栏",
                    describe: "**********",
                  },
                  {
                    id: 5,
                    code: "PIP",
                    name: "管道2",
                    describe: "****",
                  },
                  {
                    id: 6,
                    code: "FIT",
                    name: "管件2",
                    describe: "****",
                  },
                  {
                    id: 7,
                    code: "P_BLT",
                    name: "螺栓2",
                    describe: "****",
                  },
                  {
                    id: 8,
                    code: "P_BLT",
                    name: "栅栏2",
                    describe: "**********",
                  },
                ],
              },
              {
                id: 2,
                codeName: "编码",
                name: "等级",
                tableDataList: [
                  {
                    id: 1,
                    code: "PP",
                    name: "等级1",
                    describe: "****",
                  },
                  {
                    id: 2,
                    code: "PB",
                    name: "等级2",
                    describe: "****",
                  },
                  {
                    id: 3,
                    code: "PC",
                    name: "等级3",
                    describe: "****",
                  },
                  {
                    id: 4,
                    code: "PD",
                    name: "等级4",
                    describe: "****",
                  },
                  {
                    id: 5,
                    code: "PA",
                    name: "等级1",
                    describe: "****",
                  },
                  {
                    id: 6,
                    code: "PBQ",
                    name: "等级2",
                    describe: "****",
                  },
                  {
                    id: 7,
                    code: "PCM",
                    name: "等级3",
                    describe: "****",
                  },
                  {
                    id: 8,
                    code: "PDR",
                    name: "等级4",
                    describe: "****",
                  },
                ],
              },
              {
                id: 3,
                codeName: "编码",
                name: "尺寸",
                tableDataList: [
                  {
                    id: 1,
                    code: "PP",
                    name: "小号",
                    describe: "****",
                  },
                  {
                    id: 2,
                    code: "PA",
                    name: "中号",
                    describe: "****",
                  },
                  {
                    id: 3,
                    code: "PB",
                    name: "大号",
                    describe: "****",
                  },
                  {
                    id: 4,
                    code: "PC",
                    name: "超大号",
                    describe: "****",
                  },
                ],
              },
              {
                id: 4,
                codeName: "物资编码",
                name: "流水号",
                tableDataList: [
                  {
                    id: 1,
                    code: "PPASAS",
                    name: "100001",
                    describe: "****",
                  },
                  {
                    id: 2,
                    code: "PPFDSA",
                    name: "100002",
                    describe: "****",
                  },
                  {
                    id: 3,
                    code: "PPFDSAF",
                    name: "100003",
                    describe: "****",
                  },
                  {
                    id: 4,
                    code: "PEFAEFP",
                    name: "100004",
                    describe: "****",
                  },
                ],
              },
            ],
          },
          {
            id: 3,
            name: "规则C",
            message: ["元件", "等级", "尺寸", "流水号"],
            tableData: [
              {
                id: 1,
                codeName: "编码",
                name: "名称",
                tableDataList: [
                  {
                    id: 1,
                    code: "PIP",
                    name: "管道",
                    describe: "****",
                  },
                  {
                    id: 2,
                    code: "FIT",
                    name: "管件",
                    describe: "****",
                  },
                  {
                    id: 3,
                    code: "P_BLT",
                    name: "螺栓",
                    describe: "****",
                  },
                  {
                    id: 4,
                    code: "P_BLT",
                    name: "栅栏",
                    describe: "**********",
                  },
                  {
                    id: 5,
                    code: "PIP",
                    name: "管道2",
                    describe: "****",
                  },
                  {
                    id: 6,
                    code: "FIT",
                    name: "管件2",
                    describe: "****",
                  },
                  {
                    id: 7,
                    code: "P_BLT",
                    name: "螺栓2",
                    describe: "****",
                  },
                  {
                    id: 8,
                    code: "P_BLT",
                    name: "栅栏2",
                    describe: "**********",
                  },
                ],
              },
              {
                id: 2,
                codeName: "编码",
                name: "等级",
                tableDataList: [
                  {
                    id: 1,
                    code: "PP",
                    name: "等级1",
                    describe: "****",
                  },
                  {
                    id: 2,
                    code: "PB",
                    name: "等级2",
                    describe: "****",
                  },
                  {
                    id: 3,
                    code: "PC",
                    name: "等级3",
                    describe: "****",
                  },
                  {
                    id: 4,
                    code: "PD",
                    name: "等级4",
                    describe: "****",
                  },
                  {
                    id: 5,
                    code: "PA",
                    name: "等级1",
                    describe: "****",
                  },
                  {
                    id: 6,
                    code: "PBQ",
                    name: "等级2",
                    describe: "****",
                  },
                  {
                    id: 7,
                    code: "PCM",
                    name: "等级3",
                    describe: "****",
                  },
                  {
                    id: 8,
                    code: "PDR",
                    name: "等级4",
                    describe: "****",
                  },
                ],
              },
              {
                id: 3,
                codeName: "编码",
                name: "尺寸",
                tableDataList: [
                  {
                    id: 1,
                    code: "PP",
                    name: "小号",
                    describe: "****",
                  },
                  {
                    id: 2,
                    code: "PA",
                    name: "中号",
                    describe: "****",
                  },
                  {
                    id: 3,
                    code: "PB",
                    name: "大号",
                    describe: "****",
                  },
                  {
                    id: 4,
                    code: "PC",
                    name: "超大号",
                    describe: "****",
                  },
                ],
              },
              {
                id: 4,
                codeName: "物资编码",
                name: "流水号",
                tableDataList: [
                  {
                    id: 1,
                    code: "PPASAS",
                    name: "100001",
                    describe: "****",
                  },
                  {
                    id: 2,
                    code: "PPFDSA",
                    name: "100002",
                    describe: "****",
                  },
                  {
                    id: 3,
                    code: "PPFDSAF",
                    name: "100003",
                    describe: "****",
                  },
                  {
                    id: 4,
                    code: "PEFAEFP",
                    name: "100004",
                    describe: "****",
                  },
                ],
              },
            ],
          },
          {
            id: 4,
            name: "规则D",
            message: ["元件", "等级", "尺寸", "流水号"],
            tableData: [
              {
                id: 1,
                codeName: "编码",
                name: "名称",
                tableDataList: [
                  {
                    id: 1,
                    code: "PIP",
                    name: "管道",
                    describe: "****",
                  },
                  {
                    id: 2,
                    code: "FIT",
                    name: "管件",
                    describe: "****",
                  },
                  {
                    id: 3,
                    code: "P_BLT",
                    name: "螺栓",
                    describe: "****",
                  },
                  {
                    id: 4,
                    code: "P_BLT",
                    name: "栅栏",
                    describe: "**********",
                  },
                  {
                    id: 5,
                    code: "PIP",
                    name: "管道2",
                    describe: "****",
                  },
                  {
                    id: 6,
                    code: "FIT",
                    name: "管件2",
                    describe: "****",
                  },
                  {
                    id: 7,
                    code: "P_BLT",
                    name: "螺栓2",
                    describe: "****",
                  },
                  {
                    id: 8,
                    code: "P_BLT",
                    name: "栅栏2",
                    describe: "**********",
                  },
                ],
              },
              {
                id: 2,
                codeName: "编码",
                name: "等级",
                tableDataList: [
                  {
                    id: 1,
                    code: "PP",
                    name: "等级1",
                    describe: "****",
                  },
                  {
                    id: 2,
                    code: "PB",
                    name: "等级2",
                    describe: "****",
                  },
                  {
                    id: 3,
                    code: "PC",
                    name: "等级3",
                    describe: "****",
                  },
                  {
                    id: 4,
                    code: "PD",
                    name: "等级4",
                    describe: "****",
                  },
                  {
                    id: 5,
                    code: "PA",
                    name: "等级1",
                    describe: "****",
                  },
                  {
                    id: 6,
                    code: "PBQ",
                    name: "等级2",
                    describe: "****",
                  },
                  {
                    id: 7,
                    code: "PCM",
                    name: "等级3",
                    describe: "****",
                  },
                  {
                    id: 8,
                    code: "PDR",
                    name: "等级4",
                    describe: "****",
                  },
                ],
              },
              {
                id: 3,
                codeName: "编码",
                name: "尺寸",
                tableDataList: [
                  {
                    id: 1,
                    code: "PP",
                    name: "小号",
                    describe: "****",
                  },
                  {
                    id: 2,
                    code: "PA",
                    name: "中号",
                    describe: "****",
                  },
                  {
                    id: 3,
                    code: "PB",
                    name: "大号",
                    describe: "****",
                  },
                  {
                    id: 4,
                    code: "PC",
                    name: "超大号",
                    describe: "****",
                  },
                ],
              },
              {
                id: 4,
                codeName: "物资编码",
                name: "流水号",
                tableDataList: [
                  {
                    id: 1,
                    code: "PPASAS",
                    name: "100001",
                    describe: "****",
                  },
                  {
                    id: 2,
                    code: "PPFDSA",
                    name: "100002",
                    describe: "****",
                  },
                  {
                    id: 3,
                    code: "PPFDSAF",
                    name: "100003",
                    describe: "****",
                  },
                  {
                    id: 4,
                    code: "PEFAEFP",
                    name: "100004",
                    describe: "****",
                  },
                ],
              },
            ],
          },
        ],
      },
      templateSelection: "",
      templateRadio: "",
      // 默认显示第几页
      currentPage: 1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 1,
      // 个数选择器（可修改）
      pageSizes: [10, 20, 30, 50, 100],
      // 默认每页显示的条数（可修改）
      PageSize: 10,

      //编码信息list
      encodedList: [],
      //传送的数据
      passMessage: {
        encoded: "",
        level: "",
      },
      currentRow: null,
    };
  },
  methods: {
    // 提交按钮
    submit() {
      if (this.currentRow != null) {
        this.encodedList[this.active] = this.currentRow.code;
        //console.log(this.encodedList);
        //this.passMessage.level = this.form.formList[this.id].region;
        var c = 0;
        var messageAgain = "";
        for (var index in this.encodedList) {
          if (c == 0) {
            messageAgain += this.encodedList[index];
          } else {
            messageAgain += "-" + this.encodedList[index];
          }
          c++;
        }
        console.log(messageAgain);
        console.log(this.form.formList[this.id].region)
        // stroage.push(messageAgain)
        // Cookies.set('code',messageAgain,"1h")
        // Cookies.set('codeType',this.form.formList[this.id].region,"1h")

        // 子组件穿父组件
        this.$emit('show',messageAgain,this.form.formList[this.id].region)

        this.passMessage.encoded = messageAgain;
        this.passMessage.level = this.form.formList[this.id].region;
        console.log(this.passMessage);
        this.$message({
          message: "恭喜你，提交成功",
          type: "success",
        });
        this.initPass()
        setTimeout(() => {
          this.active = 0;
          this.detailVisible = false;
        }, 500);
      } else {
        this.$message({
          message: "未选择任何编码",
          type: "warning",
        });
      }
    },
    // 数据传送初始化
    initPass() {
       this.passMessage.encoded = ""
       this.passMessage.level = ""
      this.encodedList = []
      this.currentRow = null
    },
    cancel() {
      this.initPass()
      this.active = 0
      this.detailVisible = false;
    },
    // 清楚单选框
    clear() {
      this.templateRadio = null;
      this.templateSelection = null;
    },
    init(id) {
      this.detailVisible = true;
      //data是父组件弹窗传递过来的值，我们可以打印看看
      console.log(id);
      this.id = id;
    },
    next() {
      // console.log(this.encodedList);
      // console.log(this.active + "=========== active");
      if (this.currentRow != null) {
        if (this.encodedList[this.active] != null) {
          this.encodedList[this.active] = this.currentRow.code;
        } else {
          this.encodedList.push(this.currentRow.code);
        }
        if (this.active < this.rule.ruleList[this.id].tableData.length)
          this.active++;
        this.currentRow = null;
      } else {
        if (this.encodedList[this.active] != null) {
          if (this.active < this.rule.ruleList[this.id].tableData.length)
            this.active++;
        } else {
          this.$message({
            message: "未选择任何编码",
            type: "warning",
          });
        }
      }
      // console.log(this.active);
      // console.log(this.rule.ruleList[this.id].tableData[this.active].codeName);
    },
    last() {
      this.currentRow = null;
      if (this.active > 0) {
        this.active--;
      }
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChangeTable(row) {
      // this.currentRow = val;
      // console.log(val);
      if (row != null) {
        this.currentRow = row;
        console.log(row);
        this.templateSelection =
          this.rule.ruleList[this.id].tableData[
            this.active
          ].tableDataList.indexOf(row) % this.PageSize;
      } else {
        this.templateRadio = null;
        this.templateSelection = null;
      }

      // console.log(this.templateSelection%this.PageSize);
      // this.templateRadio = row.id;
    },
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val;
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val;
    },
    // getData(){
    //          // 这里使用axios，使用时请提前引入
    //          axios.post(url,{
    //               orgCode:1
    //          },{emulateJSON: true},
    //          {
    //            headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
    //           }
    //           ).then(reponse=>{
    //                console.log(reponse)
    //                // 将数据赋值给tableData
    //                this.tableData=data.data.body
    //                // 将数据的长度赋值给totalCount
    //                this.totalCount=data.data.body.length
    //           })
    //      },
    created: function () {
      this.totalCount = this.rule.ruleList[this.id].tableData.length;
    },
  },
};
</script>

<style>
* {
  margin: 0%;
  padding: 0%;
}
.el-dialog__header {
  padding: 5px;
}

.search {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
}
.searchInput {
  width: 40%;
}
.searchButton {
  width: 15%;
}
</style>

